/* 财务记录
 * @Author: Joursion
 * @Date: 2018-08-02 10:40:13
 * @Last Modified by: Joursion
 * @Last Modified time: 2018-08-11 20:06:10
 */

import React, {Component} from 'react';
import {View, Image, StyleSheet, Text, AppState, ScrollView, AppStateStatus, TouchableHighlight, TouchableOpacity, FlatList} from 'react-native';

import CommonTitleBar from '../components/CommonTitleBar';
import { INavigation } from '../interface';
import BalanceRecordItem from '../components/BalanceRecordItem';
import { request } from '../util';
import { API_MAP } from '../util/constants';

interface IProps {
    navigation: INavigation,
}

interface IState {
    page: number,
    limit: number,
    hasNext: boolean,
    [key: string]: any,
}

class BalanceRecord extends Component<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            list: [
            ],
            page: 1,
            limit: 10,
            hasNext: true,
        }
    }

    loadData = (page: number | string, limit: number | string) => {
        request(API_MAP.balanceRecord, {
            method: 'get',
            data: {
                page: Number(page),
                limit: Number(limit),
            }
        }, false, (err, res) => {
            if (res.retCode == '00') {
                let data = res.data;
                const {list = [], hasNext = true, page, limit} = data;
                if (page == 1) {
                    this.setState({list, hasNext, page, limit});
                } else {
                    let {list: List} = this.state;
                    List.concat(list);
                    this.setState({list: List, hasNext, page, limit});
                }
            }
        })
    }

    componentDidMount () {
        this.loadData(1, 10);
    }

    onEndReached = () => {
        let {page, limit, hasNext} = this.state;
        console.log('onEndReached....', page, limit, hasNext);
        if (!hasNext) {
            return;
        }
        this.loadData(Number(page) + 1, limit);
    }

    renderItem = ({item, index}) => {
        return (
            <View>
                <BalanceRecordItem {...item} key={`balanceRecord-${index}`}/>
            </View>
        )
    }
    
    render() {
        let {list, hasNext} = this.state;
        return (
            <View>
                <CommonTitleBar  title={'财务记录'} back={true} backgroundColor={'white'} nav={this.props.navigation}/>
                <View>
                <FlatList onEndReached={this.onEndReached} onEndReachedThreshold={0.1}
                    data={list}
                    renderItem={
                        this.renderItem
                    }
                >
                </FlatList>
                </View>
                <View>
                    <Text style={{
                        textAlign: 'center',
                        opacity: 0.3,
                        paddingTop: 10
                    }}>{hasNext ? '上滑加载更多': '已经到底部～'}</Text>
                </View>
            </View>
        )
    }
}

export default BalanceRecord;